<template>
  <div class="content-wrap">
    <div class="content">
      <div class="title">
        <h3>标签【{{ tagName }}】相关内容</h3>
      </div>
      <ListItem v-for="post in postList" :post="post" :key="post.id"></ListItem>
      <div class="pagination">
        <el-pagination
          background
          layout="total, prev, pager, next"
          @current-change="handleCurrentChange"
          :current-page.sync="pageNo"
          :total="totalElements">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
  import {getListByTag} from '../api/post'
  import ListItem from '../components/ListItem'

  export default {
    name: "tag",
    props:['tagName'],
    data() {
      return {
        pageNo: 1,
        categoryId: 1,
        totalElements: 0,
        postList: []
      }
    },
    created() {
      this.listByTag(this.tagName)
    },
    methods: {
      listByTag(tagName) {
        getListByTag(tagName, this.pageNo).then(res => {
          this.postList = res.data.content
          this.pageNo = res.data.number + 1
          this.totalElements = res.data.totalElements
        })
      },
      handleCurrentChange(val) {
        this.pageNo = val
        this.listByCategoryId(this.categoryId)
      }
    }, watch: {
      "$route": function (to, from) {
        this.listByTag(this.tagName)
        //from 对象中包含当前地址
        //to 对象中包含目标地址
        //其实还有一个next参数的，这个参数是控制路由是否跳转的，如果没写，可以不用写next()来代表允许路由跳转，如果写了就必须写next(),否则路由是不会生效的。
      }
    },
    components: {ListItem}
  }
</script>

<style scoped>
</style>
